<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title</title>
		<style type="text/css">
			body {
				font-family: helvetica,arial,serif;
				color: #333;
				background-color: #ccc;
				margin: 1em 10%;
			}
			h1 {
				color: #333;
				background-color: transparent;
			}
			a {
				color: #c60;
				background-color: transparent;
				font-weight: bold;
				text-decoration: none;
			}
			ul {
				padding: 0;
			
			}
			li {
				float: left;
				padding: 1em;
				list-style: none;
			}
			#imagegallery {
				list-style: none;
			}
			#imagegallery li {
				margin: 0px 20px 20px 0px;
				padding: 0px;
				display: inline;
			}
			#imagegallery li a img {
				border: 0;
			}
		</style>
		<script src="../jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//1.给所有的a注册点击事件
					
				$("#imagegallery a").click(function(){
					var href = $(this).attr("href");
					$("#image").attr("src",href);
					var title = $(this).attr("title");
					$("#des").text(title);
					return false;
				});
			});
		</script>
	</head>
	<body>
		<h2>
			美女画廊
		</h2>
		
		<ul id="imagegallery">
			<li><a href="images/1.jpg" title="美女A">
				<img src="images/1-small.jpg" width="100" alt="美女1"/>
			</a></li>
			<li><a href="images/2.jpg" title="美女B">
				<img src="images/2-small.jpg" width="100" alt="美女2"/>
			</a></li>
			<li><a href="images/3.jpg" title="美女C">
				<img src="images/3-small.jpg" width="100" alt="美女3"/>
			</a></li>
			<li><a href="images/4.jpg" title="美女D">
				<img src="images/4-small.jpg" width="100" alt="美女4"/>
			</a></li>
		</ul>
		
		<div style="clear:both"></div>
		
		<img id="image" src="images/placeholder.png" alt="" width="450px"/>
		
		<p id="des">选择一个图片</p>

	</body>
</html>